// @ts-nocheck
import {
  Row,
  Col,
  Form,
  Select,
  Input,
  TreeSelect,
  Radio,
  Checkbox,
  TimePicker,
  DatePicker,
  Button,
  Space
} from 'antd'

import {
  CaretDownOutlined,
  MinusCircleOutlined,
  PlusOutlined
} from '@ant-design/icons'

const { TextArea } = Input

const getFormItemName = (name, field) => {
  if (field) return [field, name]
  return name
}

const renderFormItem = (config, field) => {
  const { type, formItemProps, props = {} } = config
  let element = null
  switch (type) {
    case 'Select':
      element = (
        <Select
          placeholder="请选择"
          showSearch
          optionFilterProp="label"
          allowClear
          suffixIcon={
            <CaretDownOutlined
              style={{ color: 'var(--xdrsec-switch-background-color)' }}
            />
          }
          getPopupContainer={triggerNode => triggerNode.parentNode}
          {...props}
        />
      )
      break
    case 'TreeSelect':
      element = (
        <TreeSelect
          getPopupContainer={triggerNode => triggerNode.parentNode}
          treeCheckable
          treeDefaultExpandAll
          maxTagCount={1}
          allowClear
          showArrow
          dropdownMatchSelectWidth={false}
          placeholder="请选择"
          style={{ width: '100%' }}
          suffixIcon={
            <CaretDownOutlined
              style={{ color: 'var(--xdrsec-switch-background-color)' }}
            />
          }
          {...props}
        />
      )
      break
    case 'RadioGroup':
      element = <Radio.Group size="small" {...props} />
      break
    case 'CheckboxGroup':
      element = <Checkbox.Group {...props} />
      break
    case 'TimePicker':
      element = (
        <TimePicker
          getPopupContainer={triggerNode => triggerNode.parentNode}
          {...props}
        />
      )
      break
    case 'DatePicker':
      element = (
        <DatePicker
          getPopupContainer={triggerNode => triggerNode.parentNode}
          allowClear
          {...props}
        />
      )
      break
    case 'RangePicker':
      element = (
        <RangePicker
          getPopupContainer={triggerNode => triggerNode.parentNode}
          showTime
          allowClear
          {...props}
        />
      )
      break
    case 'TextArea':
      element = <TextArea rows={4} allowClear {...props} />
      break
    case 'Input':
      element = <Input placeholder="请输入" allowClear {...props} />
      break
    default:
      break
  }
  return (
    <Form.Item
      key={formItemProps.name}
      {...formItemProps}
      name={getFormItemName(formItemProps.name, field)}
    >
      {element}
    </Form.Item>
  )
}

export { renderFormItem }
